<template>
  <div>
    <div class="details">
      <h3>1213</h3>
      <h4>CLICKS</h4>
    </div>
    <apexchart :series="series" height="80" :options="option"></apexchart>
  </div>

</template>

<script>
export default {
  name: "BoxCard",
  data() {
    return {
      series: [{
        data: [25, 66, 41, 59, 25, 44, 12, 36, 9, 21]
      }],
      option: {
        chart: {
          group: 'sparks',
          type: 'line',
          height: 80,
          sparkline: {
            enabled: true
          },
          dropShadow: {
            enabled: true,
            top: 1,
            left: 1,
            blur: 2,
            opacity: 0.2,
          }
        },
        stroke: {
          curve: 'smooth'
        },
        markers: {
          size: 0
        },
        grid: {
          padding: {
            top: 20,
            bottom: 10,
            left: 110
          }
        },
        colors: ['#fff'],
        tooltip: {
          x: {
            show: false
          },
          y: {
            title: {
              formatter: function formatter(val) {
                return '';
              }
            }
          }
        }
      }

    }
  }
}
</script>

<style scoped>
.details {
  position: absolute;
  color: #fff;
  transform: scale(0.7) translate(-22px, 20px);
}
</style>
